<script setup>
import {ref, provide, inject} from "vue";
import {ElMessage} from 'element-plus'
import {EditPen, Lock, Message} from "@element-plus/icons-vue";
import {post} from "@/net";
import router from "@/router";
const active = ref(0)
provide('active', active)
const form = ref({
    email: '',
    code: '',
    password: '',
    password_repeat: ''
})
const coldTime = ref(0)
const isEmailValidate = ref(false)
const formEmailRef = ref()
const formPsdRef = ref()

const validatePassword = (rule, value, callback) => {
    if (value === '')
        callback(new Error('请确认密码'))
    else if (value !== form.value.password)
        callback(new Error('两次输入密码不一致!'))
    else
        callback()
}

const rule = {
    email: [
        { required: true, message: '请输入邮箱地址', trigger: ['blur', 'change'] },
        { type: 'email', message: '请输入合法的邮箱地址', trigger: ['blur', 'change'] },
    ],
    code: [
        {required: true, message: '请输入验证码', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, max: 16, message: '密码长度必须在6-16之间', trigger: ['blur', 'change'] },
    ],
    password_repeat: [
        { validator: validatePassword, trigger: ['blur', 'change'] },
        { min: 6, max: 16, message: '密码长度必须在6-16之间', trigger: ['blur', 'change'] },
    ]
}

const onValidate = (prop, isValid) => {
    if (prop === 'email')
        isEmailValidate.value = isValid
}

const sendValidEmail = () => {
    post("/api/auth/valid-reset-email",{
        email: form.value.email
    }, (success) => {
        ElMessage.success(success)
        coldTime.value = 60
        setInterval(() => coldTime.value--, 1000)
    })
}

const startValidEmail = () => {
    formEmailRef.value.validate((isValid) => {
        if (isValid) {
            post('/api/auth/start-reset', {
                email: form.value.email,
                code: form.value.code
            }, (message) => {
                ElMessage.success(message)
                active.value++
            })
        }else {
            ElMessage.warning("请填写邮箱和验证码")
        }
    })
}

const doReset = () => {
    formPsdRef.value.validate((isValid) => {
        if (isValid) {
            post('/api/auth/do-reset', {
                password: form.value.password
            }, (message) => {
                ElMessage.success(message)
                active.value++
                router.push('/login')
            })
        }
    })
}



</script>

<template>
    <div class="forget-main-div flex">
        <div class="forget-div m-auto flex flex-col">
            <div class="forget-header">
                <el-steps :space="300" :active="active" :align-center="true" finish-status="success">
                    <el-step title="验证邮箱" />
                    <el-step title="重置密码" />
                </el-steps>
            </div>
            <transition>
                <div class="valid-email m-auto flex flex-col" v-if="active === 0" >
                    <el-form :model="form" :rules="rule" @validate="onValidate" ref="formEmailRef">
                        <el-form-item prop="email">
                            <el-input type="email" v-model="form.email" placeholder="邮箱地址">
                                <template #prefix>
                                    <el-icon><Message /></el-icon>
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="code">
                            <el-row :gutter="10" style="width: 100%">
                                <el-col :span="17">
                                    <el-input v-model="form.code" :maxlength="6" type="text" placeholder="请输入验证码">
                                        <template #prefix>
                                            <el-icon><EditPen /></el-icon>
                                        </template>
                                    </el-input>
                                </el-col>
                                <el-col :span="5">
                                    <el-button class="code-btn" type="primary"
                                               :disabled="coldTime > 0 || !isEmailValidate" @click="sendValidEmail">
                                        {{ coldTime > 0? '请稍后' + coldTime + '秒': '发送验证码'}}
                                    </el-button>
                                </el-col>
                            </el-row>
                        </el-form-item>
                    </el-form>
                    <el-button class="forget-btn m-auto" type="primary" style="
                    width: 180px; margin-top: 50px;" @click="startValidEmail">验证邮箱</el-button>
                </div>
            </transition>
            <transition name="el-zoom-in-left">
                <div class="valid-email m-auto flex flex-col" v-if="active===1">
                    <el-form :model="form" :rules="rule" ref="formPsdRef">
                        <el-form-item prop="password">
                            <el-input type="password" v-model="form.password" placeholder="输入新密码">
                                <template #prefix>
                                    <el-icon><Lock /></el-icon>
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="password_repeat">
                            <el-input type="password" v-model="form.password_repeat" placeholder="确认新密码">
                                <template #prefix>
                                    <el-icon><Lock /></el-icon>
                                </template>
                            </el-input>
                        </el-form-item>
                    </el-form>
                    <el-button class="forget-btn m-auto" type="primary" style="
                    width: 180px; margin-top: 50px;" @click="doReset">重置密码</el-button>
                </div>
            </transition>
        </div>
    </div>
</template>

<style scoped>
    .forget-main-div {
        position: absolute;
        width: 100vw;
        height: 100vh;
    }
    .forget-div {
        width: 600px;
        height: 800px;
    }
    .forget-header {
        margin-top: 50px;
    }
    .valid-email {
        margin-top: 200px;
    }
</style>